<#assign basePath=request.contextPath />
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>修改头像</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="${basePath }/img/favicon.ico"> 
    <link href="${basePath }/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="${basePath }/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="${basePath }/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="${basePath }/css/animate.min.css" rel="stylesheet">
    <link href="${basePath }/css/style.min862f.css?v=4.1.0" rel="stylesheet">
	<style>
		.img-preview {
		    overflow: hidden;
		    text - align: center;
		    width: 100 %
		}
		
		.img-preview-sm {
		    height: 130px;
		    width: 130px
		}
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title  back-change">
                        <h5>头像裁剪 <small></small></h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a href="javascript: location.replace(location.href);">
                                <i class="fa fa-refresh"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="image-crop">
                                    <img src="${basePath }/img/anon.png">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h4>预览：</h4>
                                <div class="img-preview img-preview-sm"></div>
                                <p></p>
                                <div class="btn-group">
                                    <label title="选择头像" for="inputImage" class="btn btn-primary">
                                        <input type="file" accept="image/*" name="file" id="inputImage" class="hide"> 上传新图片
                                    </label>
                                    <!-- <label title="下载图片" id="download" class="btn btn-primary">下载</label> -->
                                </div>
                                <p></p>
                                <div class="btn-group">
                                    <button class="btn btn-white" id="zoomIn" type="button">放大</button>
                                    <button class="btn btn-white" id="zoomOut" type="button">缩小</button>
                                    <button class="btn btn-white" id="rotateLeft" type="button">左旋转</button>
                                    <button class="btn btn-white" id="rotateRight" type="button">右旋转</button>
                                    <button class="btn btn-warning" id="setDrag" type="button">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="${basePath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${basePath }/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${basePath }/js/plugins/cropper/cropper.min.js"></script>
    <#include '/common/common-js.html'>
	<script type="text/javascript">
	$(document).ready(function() {
	    var o = $(".image-crop > img");
	    $(o).cropper({
	        aspectRatio: 1,
	        preview: ".img-preview",
	        done: function() {}
	    });
	    var r = $("#inputImage");
	    window.FileReader ? r.change(function() {
	        var e, i = new FileReader,
	        t = this.files;
	        t.length && (e = t[0], /^image\/\w+$/.test(e.type) ? (i.readAsDataURL(e), i.onload = function() {
	            r.val(""),
	            o.cropper("reset", !0).cropper("replace", this.result)
	        }) : showMessage("请选择图片文件"))
	    }) : 
	    r.addClass("hide"),
	    $("#download").click(function() {
	        window.open(o.cropper("getDataURL"))
	    }),
	    $("#zoomIn").click(function() {
	        o.cropper("zoom", .1)
	    }),
	    $("#zoomOut").click(function() {
	        o.cropper("zoom", -.1)
	    }),
	    $("#rotateLeft").click(function() {
	        o.cropper("rotate", 45)
	    }),
	    $("#rotateRight").click(function() {
	        o.cropper("rotate", -45)
	    }),
	    $("#setDrag").click(function() {
	        /* o.cropper("setDragMode", "crop") */
	        var imgBlob = dataURLtoBlob(o.cropper("getDataURL"));
	        var formData = new FormData();
	        formData.append("id", "${id}");
	        formData.append("img", imgBlob, "thymol");
	        $.ajax({  
		        url: '${basePath}/user/uploadTx' ,  
		        type: 'POST',  
		        data: formData,  
		        async: false,  
		        cache: false,  
		        contentType: false,  
		        processData: false,  
		        success: function (data) { 
		        	if(data.error){
						layer.msg(data.msg,{icon:2,time:1000});
					}else{
						if(data == 'success'){
							layer.msg('保存成功',{icon:1,time:1000});
							var tx = window.parent.document.getElementById("tx");
							tx.src = '${basePath}/user/getTx?id='+ <@shiro.principal property="userId"/> + '&t=' + Math.random();
							return;
						}
			        	
						layer.msg('保存失败',{icon:2,time:1000});
						
					}
		        },
		        error : function(e){
		        	console.log(e);
		        }
		    }); 
	    })
	});
	
	//base64转blob
	function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }
	</script>
</body>
</html>
